<template>
<div class="btn-box">
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="uploadDoor.open = true"
      >户信息迁移</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button
        type="success"
        plain
        icon="el-icon-edit"
        size="mini"
        :disabled="single"
        @click="uploadProject.open = true"
      >项目迁移</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="uploadRepair.open = true"
      >维修记录迁移</el-button>
    </el-col>
  </el-row>
  <el-dialog :title="uploadDoor.title" :visible.sync="uploadDoor.open" width="400px">
      <el-upload
      ref="uploadDoor"
      :limit="1"
      accept=".xls"
      :headers="uploadDoor.headers"
      :action="uploadDoor.url + '?updateSupport=' + uploadDoor.updateDoorSupport"
      :disabled="uploadDoor.isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      drag
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        <el-checkbox v-model="uploadDoor.updateDoorSupport" />是否更新已经存在的用户数据
        <el-link type="info" style="font-size:12px" @click="importDoorTemplate">下载模板</el-link>
      </div>
      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="cancelFileForm">取 消</el-button>
      </div>
    </el-dialog>

<!--工程导入文件-->
  <el-dialog :title="uploadProject.title" :visible.sync="uploadProject.open" width="400px">
    <el-upload
      ref="uploadProject"
      :limit="1"
      accept=".xls"
      :headers="uploadProject.headers"
      :action="uploadProject.url + '?updateSupport=' + uploadProject.updateProjectSupport"
      :disabled="uploadProject.isUploading"
      :on-progress="handleFileProjectUploadProgress"
      :on-success="handleFileProjectSuccess"
      :auto-upload="false"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        <el-checkbox v-model="uploadProject.updateProjectSupport" />是否更新已经存在的用户数据
        <el-link type="info" style="font-size:12px" @click="importProjectTemplate">下载模板</el-link>
      </div>
      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitProjectFileForm">确 定</el-button>
      <el-button @click="cancelFileForm">取 消</el-button>
    </div>
  </el-dialog>


  <!--repair导入文件-->
  <el-dialog :title="uploadRepair.title" :visible.sync="uploadRepair.open" width="400px">
    <el-upload
      ref="uploadRepair"
      :limit="1"
      accept=".xls"
      :headers="uploadRepair.headers"
      :action="uploadRepair.url + '?updateSupport=' + uploadRepair.updateRepairSupport"
      :disabled="uploadRepair.isUploading"
      :on-progress="handleFileRepairUploadProgress"
      :on-success="handleFileRepairSuccess"
      :auto-upload="false"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        <el-checkbox v-model="uploadRepair.updateRepairSupport" />是否更新已经存在的用户数据
        <el-link type="info" style="font-size:12px" @click="importRepairTemplate">下载模板</el-link>
      </div>
      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitRepairFileForm">确 定</el-button>
      <el-button @click="cancelFileForm">取 消</el-button>
    </div>
  </el-dialog>

</div>
</template>
<script>
import { getToken } from "@/utils/auth";
 export default {
data() {
      return {
        uploadDoor: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateDoorSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/house/dataMigration/importAllData"
        },

        uploadCost: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateCostSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/house/dataMigration/importCostData"
        },

        uploadProject: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateProjectSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/house/dataMigration/importProjectData"
        },

        uploadRepair: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateRepairSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/house/dataMigration/importRepairData"
        }
      };
    },
    methods: {
        //door取消
        cancelFileForm() {
          this.uploadDoor.open = false;
          this.uploadCost.open = false;
          this.uploadProject.open = false;
          this.uploadRepair.open = false;
        },
      // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
          this.uploadDoor.isUploading = true;
        },
      // cost文件上传中处理
      handleFileCostUploadProgress(event, file, fileList) {
        this.uploadCost.isUploading = true;
      },
      // project文件上传中处理
      handleFileProjectUploadProgress(event, file, fileList) {
        this.uploadProject.isUploading = true;
      },
      // Repair文件上传中处理
      handleFileRepairUploadProgress(event, file, fileList) {
        this.uploadRepair.isUploading = true;
      },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
          this.uploadDoor.open = false;
          this.uploadDoor.isUploading = false;
          this.$refs.uploadDoor.clearFiles();
          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        },
      // 文件cost上传成功处理
      handleFileCostSuccess(response, file, fileList) {
        this.uploadCost.open = false;
        this.uploadCost.isUploading = false;
        this.$refs.uploadCost.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      },
      // 文件project上传成功处理
      handleFileProjectSuccess(response, file, fileList) {
        this.uploadProject.open = false;
        this.uploadProject.isUploading = false;
        this.$refs.uploadProject.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      },
      // 文件repair上传成功处理
      handleFileRepairSuccess(response, file, fileList) {
        this.uploadRepair.open = false;
        this.uploadRepair.isUploading = false;
        this.$refs.uploadRepair.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      },
        // 提交上传文件
        submitFileForm() {
          debugger
          this.$refs.uploadDoor.submit();
        },

        // cost提交上传文件
        submitCostFileForm() {
          debugger
          this.$refs.uploadCost.submit();
        },
        // project提交上传文件
        submitProjectFileForm() {
          debugger
          this.$refs.uploadProject.submit();
        },
        // Repair提交上传文件
        submitRepairFileForm() {
          debugger
          this.$refs.uploadRepair.submit();
        },

        importDoorTemplate() {
          this.download('dataMigration/importDoorTemplate', {
          }, `user_template_${new Date().getTime()}.xlsx`)
        },
        importProjectTemplate() {
          this.download('dataMigration/importProjectTemplate', {
          }, `user_template_${new Date().getTime()}.xlsx`)
        },
        importRepairTemplate() {
          this.download('dataMigration/importRepairTemplate', {
          }, `user_template_${new Date().getTime()}.xlsx`)
        },


    }
}
</script>

